<template>
  <div class="question-list-container">
    <ul class="list">
      <li
        v-for="(question, index) in questionList"
        :key="index"
        class="flex-between list-item"
        :class="[
          !(
            question.itemType === QUESTION_ITEM_TYPE.BIG_ITEM &&
            question.sub_question_info
          ) && 'hover',
          index === questionIndex && 'list-item-active'
        ]"
        @click="onSelectQuesIndex(question, index)"
      >
        <div class="flex">
          <div
            class="dot"
            :class="question.grade_rate !== 1 && 'dot-red'"
          ></div>
          <span>{{ question.questionText }}：{{ question.question_type }}</span>
        </div>
        <div
          v-if="
            !(
              question.itemType === QUESTION_ITEM_TYPE.BIG_ITEM &&
              question.sub_question_info
            )
          "
        >
          <span v-if="question.grade_rate === 1" class="unfinished-text"
            >已完成批改</span
          >
          <span v-else class="finished-text"
            >已批改{{ (question.grade_rate * 100).toFixed(0) }}%</span
          >
        </div>
      </li>
    </ul>
    <el-empty description="无题目" v-if="!questionList.length" />
  </div>
</template>

<script setup>
import { computed, watchEffect } from 'vue'
import { QUESTION_ITEM_TYPE } from '../data'

const props = defineProps({
  questionList: {
    default: []
  }
})
const questionIndex = defineModel('questionIndex', {
  required: true,
  default: null
})
const isUpdateIndex = defineModel('isUpdateIndex', {
  required: true,
  default: true
})
questionIndex.value = 0
const questionList = computed(() => props.questionList)
const onSelectQuesIndex = (question, index) => {
  if (!(question.itemType === 1 && question.sub_question_info)) {
    questionIndex.value = index
  }
}
const initData = () => {
  if (isUpdateIndex.value) {
    let index = questionList.value.findIndex(
      item =>
        !(
          item.itemType === QUESTION_ITEM_TYPE.BIG_ITEM &&
          item.sub_question_info
        ) && item.grade_rate !== 1
    )
    questionIndex.value =
      index >= 0 ? index : questionList.value.length ? 0 : null
    QUESTION_ITEM_TYPE
  }
}

watchEffect(() => {
  initData()
})
</script>

<style scoped lang="less">
.question-list-container {
  width: 280px;
  border: 1px solid #dadada;
  padding: 14px;
  height: calc(100% - 28px);
  overflow-y: auto;
  .list {
    .list-item {
      padding: 10px;
      .dot {
        width: 8px;
        height: 8px;
        border-radius: 100%;
        margin-bottom: 3px;
        background-color: #ebf5ff;
        margin-right: 6px;
      }
      .dot-red {
        background-color: #fd686d;
      }
      .finished-text {
        color: #fd686d;
      }
      .unfinished-text {
        color: #3ecac9;
      }
    }
    .list-item-active {
      background-color: #ebf5ff;
    }
  }
}
</style>
